import TransferTable from '../../packages/transfer-table';
import ZTag from '../../packages/tag'
import "../../packages/theme-chalk/src/index.scss";

const getTestData = () => {
  const data = [];
  for (let i = 1; i <= 100; i++) {
    data.push({
      id: i,
      status: i % 4 === 0,
      site: `测试网点名称 ${ i }`,
      address: `深圳市福田区华强北华强路${ i }号`
    });
  }
  return data;
};
const columns = [
  { prop: 'site', label: '网点', width: 100 },
  { prop: 'status', label: '状态', width: 60, showSlot: true },
  { prop: 'address', label: '管区' }
];

const createStatus = ({ row }) => ({
  render() {
    return <ZTag type={row.status ? 'success' : 'warning'}>{row.status ? '正常' : '异常'}</ZTag>
  }
});

describe('TransferTable', () => {
  it('默认渲染', () => {
    cy.mount(TransferTable, {
      propsData: {
        value: [1, 4],
        columns: columns,
        data: getTestData()
      },
      listeners: {
        'update:value': () => {}
      },
      slots: {
        status: [
          createStatus({ row: { status: true } }),
        ],
      }
    })

    cy.get('.z-transfer-layout__head').first().get('.head-summary').should('contain', '0/98')
    cy.get('.z-transfer-layout__head').last().get('.head-summary').should('contain', '0/2')
  });

  it('使用分页', () => {
    cy.mount(TransferTable, {
      propsData: {
        value: [1, 4],
        columns: columns,
        pagination: true,
        data: getTestData()
      },
      listeners: {
        'update:value': () => {}
      },
      slots: {
        status: [
          createStatus({ row: { status: true } }),
        ],
      }
    })

    cy.get('.z-transfer-layout__pagination').first().should('be.visible')
    cy.get('.z-transfer-layout__pagination .z-pager').children().should('have.length', 5)
  });

  it('默认勾选', () => {
    cy.mount(TransferTable, {
      propsData: {
        value: [],
        leftDefaultChecked: [1],
        columns: columns,
        data: getTestData()
      },
      listeners: {
        'update:value': () => {}
      },
      slots: {
        status: [
          createStatus({ row: { status: true } }),
        ],
      }
    })

    cy.get('.z-transfer-layout__body .z-table__row')
      .get('.z-table-column--selection .z-checkbox')
      .should('have.class', 'is-checked')
  });
});
